<template>
  <div style="width:100%" class="progress">
    <el-popover
        placement="top-end"
        :title="http.indexOf('ansheng')!=-1?'您的线上培训学习时长已达标，可以打印证书':title"
        trigger="manual"
        width='100%'
        :visible-arrow='true'
        :offset='20'
        v-model="visible"
        :style="{
            top:'63px',
            left:'0px',
        }"
        class="placement"
        >
        <span class="placementAftar">

        </span>
    </el-popover>
    <div style="width:100%;" slot="reference" class="progressBox" >
        <span>学时进度</span>
        <el-progress style="width:100%;" :text-inside="true" :stroke-width="18" :percentage="percentage" :class="percentage?'':'apass'"></el-progress>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        visible:{
            type:Boolean,
            default:false,
        },
        percentage:{
            type:Number,
            default:0,
        },
        title:{
            type:String,
            default:'您的线上培训学习时长已达到32学时，可以进行考试取证',
        },
        top:{
            type:String,
            default:'20%',
        },
    },
    data() {
        return {
            http:
            process.env.NODE_ENV === "development"
            ? process.env.VUE_APP_BASE_API
            : window.location.href.slice(
                0,
                window.location.href.indexOf("/user")
                ),
        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-popover{
        padding:8px;
        background:rgba(255, 53, 53, 0.1) ;
        // border-radius: 15px;
        border: none;
        // height: 18px;
        display: flex;
        width: 100%;
        align-items: center;
    }
    .el-popover__title{
        font-size: 12px;
        color:#FF3434;
        margin: 0;
        font-weight: 666;
    }
    .el-progress-bar__inner{
        background-color:#0054FF !important;
    }
    .el-progress-bar__innerText{
        // color:cornflowerblue;
        // font-weight: 600;
        font-size:14px !important;
    }
    .apass{
        .el-progress-bar__innerText{
            color:cornflowerblue;
            font-weight: 600;
        }
    }
    
}
.progress{
    position: relative;
    line-height: 18px;
    display: flex;
    height: 100%;
    // align-items: flex-end;
    .progressBox{
        span{
            font-size: 14px;
            color:#999;
            display: block;
            // width:80px;
            margin-bottom: 13px;
        }
    }
    .placement{
        position:absolute;
        width: 100%;
        display: flex;
        z-index: 10;
        .placementAftar{
            display: inline-block;
            border: solid 10px;
            border-color: transparent transparent rgba(255, 53, 53, 0.1);
            position: absolute;
            top:-20px;
            left:10px;
        }
    }
}
@media screen and (max-width:1690px) {
    ::v-deep{
        .el-popover{
            height: auto !important;
        }
    }
    
}
</style>